<template>
	<view>
		<navigator url="/pages/echat/echat">到echats</navigator>
		<navigator url="/pages/pull/pull">到下拉刷新页面</navigator>
		<navigator url="/pages/uni-com/uni-com">到uni-component页面</navigator>
		<navigator url="/pages/scanCode/scanCode">到扫码页面</navigator>
		<swiper class="swiper" circular indicator-dots autoplay :interval="3000"
			:duration="1000">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
		<scroll-view class="scroll-view_H" :scroll-into-view="currentView" scroll-x="true" @scroll="scroll"
			scroll-with-animation>
			<view v-for="item in 6" :id="`view-${item}`" class="scroll-view-item_H" @click="selectItem(item)">{{ item }}
			</view>
		</scroll-view>
		{{ text }}
		<rich-text :nodes="text"></rich-text>
		<view @tap="format" class="toolbar" style="height: 120px;overflow-y: auto;">
			<view class="iconfont icon-zitijiacu" data-name="bold"></view>
			<view class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
			<view class="iconfont icon-zitixieti" data-name="italic"></view>
			<view class="iconfont icon-zitiyanse" data-name="color" data-value="#0000ff"></view>
		</view>
		<editor id="editor" placeholder="开始输入..." show-img-size show-img-toolbar show-img-resize
			@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
		</editor>
		<button @click="render">render</button>
		<my-header v-model="childTitle"></my-header>
		<my-footer :title="footerTitle" @changeFooter="changeFooter"></my-footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 0,
				currentView: 'view-1',
				text: '<h1>你好</h1>',
				readOnly: false,
				formats: '',
				childTitle: '我是子组件标题',
				footerTitle: '我是底部标题'
			}
		},
		onLoad() {

		},
		methods: {
			increaseCount() {
				this.count++
			},
			selectItem(item) {
				console.log('点击了', item);
				this.currentView = `view-${item}`
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				this.editorCtx.format(name, value)
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			render() {
				this.editorCtx.getContents({
					success: ({
						html
					}) => {
						this.text = html
					}
				})
			},
			changeFooter(v) {
				this.footerTitle = v
			},
		},
		computed: {
			getCount() {
				return this.count * 2
			}
		},
		watch: {
			count(n, v) {
				console.log('新值', n, '旧值', v);
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('/static/icon/iconfont.css');

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	// .scroll-view-item {
	// 	height: 300rpx;
	// 	line-height: 300rpx;
	// 	text-align: center;
	// 	font-size: 36rpx;
	// }

	.scroll-view-item_H {
		display: inline-block;
		width: 300rpx;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
		border: 1px solid #ccc;
	}
</style>